import { BaseScene } from './BaseScene'
import { GameUtils } from '../utils/GameUtils'

export class LobbyScene extends BaseScene {
  constructor(game) {
    super(game)
    
    // 获取游戏尺寸
    const size = this.game.getSize()
    this.width = size.width
    this.height = size.height
    
    // UI元素
    this.buttons = {
      createRoom: {
        x: this.width / 2 - 100,
        y: this.height / 2 - 100,
        width: 200,
        height: 50,
        text: '创建房间'
      },
      joinRoom: {
        x: this.width / 2 - 100,
        y: this.height / 2,
        width: 200,
        height: 50,
        text: '加入房间'
      },
      settings: {
        x: this.width - 80,
        y: 20,
        width: 60,
        height: 30,
        text: '设置'
      }
    }
    
    // 房间输入框
    this.roomInput = {
      x: this.width / 2 - 100,
      y: this.height / 2 + 70,
      width: 200,
      height: 40,
      value: '',
      placeholder: '请输入房间号'
    }
    
    // 显示状态
    this.showRoomInput = false
    
    // 绑定事件处理函数
    this.boundTouchStartHandler = this.onTouchStart.bind(this)
  }
  
  init() {
    // 重置状态
    this.showRoomInput = false
    this.roomInput.value = ''
    
    // 添加事件监听
    const canvas = this.game.getContext().canvas
    canvas.addEventListener('touchstart', this.boundTouchStartHandler)
  }
  
  render(ctx) {
    // 绘制背景
    ctx.fillStyle = '#f0f0f0'
    ctx.fillRect(0, 0, this.width, this.height)
    
    // 绘制标题
    ctx.fillStyle = '#333'
    ctx.font = 'bold 36px Arial'
    ctx.textAlign = 'center'
    ctx.fillText('真心话大冒险', this.width / 2, 100)
    
    // 绘制按钮
    Object.values(this.buttons).forEach(button => {
      this.drawButton(ctx, button)
    })
    
    // 如果显示房间输入框
    if (this.showRoomInput) {
      this.drawInput(ctx, this.roomInput)
    }
  }
  
  drawButton(ctx, button) {
    // 绘制按钮背景
    ctx.fillStyle = '#4CAF50'
    ctx.beginPath()
    ctx.roundRect(button.x, button.y, button.width, button.height, 5)
    ctx.fill()
    
    // 绘制按钮文字
    ctx.fillStyle = '#FFFFFF'
    ctx.font = '20px Arial'
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.fillText(button.text, button.x + button.width / 2, button.y + button.height / 2)
  }
  
  drawInput(ctx, input) {
    // 绘制输入框背景
    ctx.fillStyle = '#FFFFFF'
    ctx.strokeStyle = '#CCCCCC'
    ctx.lineWidth = 2
    ctx.beginPath()
    ctx.roundRect(input.x, input.y, input.width, input.height, 5)
    ctx.fill()
    ctx.stroke()
    
    // 绘制输入框文字
    ctx.fillStyle = '#333333'
    ctx.font = '20px Arial'
    ctx.textAlign = 'left'
    ctx.textBaseline = 'middle'
    ctx.fillText(
      input.value || input.placeholder,
      input.x + 10,
      input.y + input.height / 2
    )
  }
  
  onTouchStart(e) {
    const canvas = this.game.getContext().canvas
    const rect = canvas.getBoundingClientRect()
    const x = e.touches[0].clientX - rect.left
    const y = e.touches[0].clientY - rect.top
    
    // 检查按钮点击
    Object.entries(this.buttons).forEach(([key, button]) => {
      if (this.isPointInRect(x, y, button)) {
        this.handleButtonClick(key)
      }
    })
    
    // 检查输入框点击
    if (this.showRoomInput && this.isPointInRect(x, y, this.roomInput)) {
      this.showKeyboard()
    }
  }
  
  isPointInRect(x, y, rect) {
    return x >= rect.x && x <= rect.x + rect.width &&
           y >= rect.y && y <= rect.y + rect.height
  }
  
  handleButtonClick(buttonKey) {
    // 播放点击音效
    this.game.getResourceManager().playSound('click')
    
    switch (buttonKey) {
      case 'createRoom':
        this.createRoom()
        break
      case 'joinRoom':
        this.showRoomInput = true
        break
      case 'settings':
        this.openSettings()
        break
    }
  }
  
  createRoom() {
    // 生成随机房间号
    const roomId = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
    
    // TODO: 创建房间逻辑
    console.log('创建房间:', roomId)
    
    // 切换到游戏场景
    this.game.getStateManager().switchScene('game')
  }
  
  showKeyboard() {
    wx.showKeyboard({
      defaultValue: this.roomInput.value,
      maxLength: 4,
      multiple: false,
      confirmType: 'done',
      success: (res) => {
        this.roomInput.value = res.value
        if (this.roomInput.value) {
          this.joinRoom()
        }
      }
    })
  }
  
  joinRoom() {
    if (!this.roomInput.value) {
      wx.showToast({
        title: '请输入房间号',
        icon: 'none'
      })
      return
    }
    
    // TODO: 加入房间逻辑
    console.log('加入房间:', this.roomInput.value)
    
    // 切换到游戏场景
    this.game.getStateManager().switchScene('game')
  }
  
  openSettings() {
    // 切换到设置场景
    this.game.getStateManager().switchScene('settings')
  }
  
  destroy() {
    // 移除事件监听
    const canvas = this.game.getContext().canvas
    canvas.removeEventListener('touchstart', this.boundTouchStartHandler)
  }
} 